import 'package:flutter/material.dart';
import 'dart:math' as math;

class CustomStepIndicator extends StatelessWidget {
  // 当前步骤(从0开始)
  final int currentStep;
  // 总步骤数，固定为5
  final int totalSteps = 5;
  // 步骤高度
  final double height = 100;

  // 颜色配置
  final Color completedColor = Colors.green;
  final Color currentColor = Color.fromRGBO(16, 37, 105, 1);
  final Color uncompletedColor = Colors.grey[300]!;
  final Color lineColor = Colors.grey[300]!;
  final Color completedLineColor = Colors.green;

  CustomStepIndicator({
    super.key,
    required this.currentStep,
  }) : assert(currentStep >= 0 && currentStep < 5, "currentStep必须在0-4之间");

  @override
  Widget build(BuildContext context) {
    // 获取屏幕宽度
    final screenWidth = MediaQuery.of(context).size.width;

    return Container(
      width: screenWidth,
      height: height,
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: Row(
        children: _buildSteps(),
      ),
    );
  }

  List<Widget> _buildSteps() {
    final List<Widget> widgets = [];

    for (int i = 0; i < totalSteps; i++) {
      // 添加步骤圆点
      widgets.add(
          _buildStepCircle(i)
      );

      // 添加连接线(最后一步不需要连接线)
      if (i != totalSteps - 1) {
        widgets.add(
            Expanded(
                child: _buildStepLine(i)
            )
        );
      }
    }

    return widgets;
  }

  // 构建步骤圆点
  Widget _buildStepCircle(int index) {
    Color circleColor;
    Color iconColor;

    if (index < currentStep) {
      // 已完成的步骤
      circleColor = completedColor;
      iconColor = Colors.white;
    } else if (index == currentStep) {
      // 当前步骤
      circleColor = currentColor;
      iconColor = Colors.white;
    } else {
      // 未完成的步骤
      circleColor = uncompletedColor;
      iconColor = Colors.transparent;
    }

    return Container(
      width: 30,
      height: 30,
      decoration: BoxDecoration(
        color: circleColor,
        shape: BoxShape.circle,
        border: index == currentStep
            ? Border.all(color: currentColor, width: 2)
            : null,
        boxShadow: index == currentStep
            ? [BoxShadow(
          color: currentColor.withOpacity(0.2),
          blurRadius: 6,
          spreadRadius: 2,
        )]
            : null,
      ),
      child: Center(
        // 已完成的步骤显示对勾
        child: index < currentStep
            ? const Icon(Icons.check, color: Colors.white, size: 18)
            : index == currentStep
            ? Text(
          (index + 1).toString(),
          style: TextStyle(
            color: iconColor,
            fontWeight: FontWeight.bold,
          ),
        )
            : null,
      ),
    );
  }

  // 构建步骤连接线
  Widget _buildStepLine(int index) {
    // 已完成的步骤之间的线为完成颜色
    final color = index < currentStep ? completedLineColor : lineColor;

    return Container(
      height: 2,
      color: color,
    );
  }
}